<template>
	<div class="padding-across-10" v-loading="loading" element-loading-text="拼命加载中">
		<div style="width: 100%;display: flex">
			<headerOpreate :opreate-datas="opreateDatas" v-on:executeAction="executeAction"></headerOpreate>
		</div>
		<div style="width: 100%;padding-top: 3px">
			<div style="float: left">
				<span style="font-size: 13px;font-weight: bold">设备种类</span>
				<el-select style="width: 120px;" v-model="category" size="small" placeholder="请选择" @change="changeCategory">
					<el-option key="MultimediaIT" label="多媒体智能终端" value="MultimediaIT"></el-option>
					<el-option key="EBox" label="智慧空开" value="EBox"></el-option>
				</el-select>
				<span style="font-size: 13px;font-weight: bold">用电量排序</span>
				<el-select style="width: 120px;" v-model="Order" size="small" placeholder="请选择" @change="changeCategory">
					<el-option label="低到高" :value="1"></el-option>
					<el-option label="高到低" :value="2"></el-option>
				</el-select>
				<template v-if="category === 'MultimediaIT'">
					<span style="font-size: 13px;font-weight: bold">{{$t('message.start')}}</span>
					<el-date-picker :editable="false" v-model="startTime" :clearable="false" size="small" type="date" placeholder="选择起始日期" @change="changeStartTime"></el-date-picker>
					<span style="font-size: 13px;font-weight: bold">{{$t('message.end')}}</span>
					<el-date-picker :editable="false" v-model="endTime" :clearable="false" size="small" type="date" placeholder="选择结束日期" @change="changeEndTime"></el-date-picker>
				</template>
				<template v-else>
					<el-select style="width: 160px; margin-left: 20px;" v-model="MonthOrDay" size="small" placeholder="请选择" @change="MonthOrDay === 'month'?initMonth() : initDate()">
						<el-option label="查询某月耗电量" value="month"></el-option>
						<el-option label="查询某日耗电量" value="day"></el-option>
					</el-select>
					<el-date-picker v-show="MonthOrDay === 'month'" :editable="false" v-model="selectedDate" :clearable="false" size="small" type="month" placeholder="选择月份" @change="initMonth"></el-date-picker>
					<el-date-picker v-show="MonthOrDay === 'day'" :editable="false" v-model="selectedDate" :clearable="false" size="small" type="date" placeholder="选择日期" @change="initDate"></el-date-picker>
				</template>
			</div>
			<div class="block" style="text-align:right;float: right">
				<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="currentPage" :page-size="pageSize" :page-sizes="[10,20,30,40,50]" layout="total,sizes, prev, pager, next, jumper" :total="totalSize">
				</el-pagination>
			</div>
		</div>
		<div style="width: 100%">
			<el-table border style="width: 100%;" :data="tableData" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" type="index" align="center"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="设备名" align="center" prop="name"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="设备码" align="center" prop="sn"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="耗电量(度)" align="center" prop="consumption"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" :label="$t('message.operation')" align="center">
					<template slot-scope="scope">
						<el-button type="primary" size="small" @click="showDetail(scope.row)">
							<li class="el-icon-information el-icon--left"></li>详情</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="block" style="text-align:right;margin-bottom:100px">
				<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="currentPage" :page-size="pageSize" :page-sizes="[10,20,30,40,50]" layout="total,sizes, prev, pager, next, jumper" :total="totalSize">
				</el-pagination>
			</div>
		</div>
	</div>
</template>
<script>
	import $ from 'jquery'
	import {
		GloabFun,
		HttpServer
	} from '../../../../assets/js/common.js'
	import headerOpreate from '../../../../components/headerOpreate'
	var date = new Date();
	export default {
		components: {
			headerOpreate
		},
		data() {
			Date.prototype.format = function(format) {
				var date = {
					"M+": this.getMonth() + 1,
					"d+": this.getDate()
				};
				if (/(y+)/i.test(format)) {
					format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
				}
				for (var k in date) {
					if (new RegExp("(" + k + ")").test(format)) {
						format = format.replace(RegExp.$1, RegExp.$1.length == 1 ?
							date[k] : ("00" + date[k]).substr(("" + date[k]).length));
					}
				}
				return format;
			}
			return {
				startTime: new Date((date.getTime() - 3600 * 1000 * 24 * 30)).format('yyyy-MM-dd') + ' 00:00:00',
				endTime: date.format('yyyy-MM-dd') + ' 23:59:59',
				loading: false,
				isReload: false,
				tableData: [],
				multipleSelection: [],
				currentPage: 1,
				pageSize: 10,
				totalSize: 0,
				opreateDatas: [{
						show: true,
						size: "small",
						type: 'primary',
						icon: 'el-icon-eleg-icon_refresh el-icon--left',
						name: '刷新',
						action: 'reloadDatas'
					},
					{
						show: true,
						size: "small",
						type: 'primary',
						icon: 'el-icon-upload2 el-icon--left',
						name: '导出表格',
						action: 'exportExcel'
					}
					// {
					// 	show: true,
					// 	size: "small",
					// 	type: 'primary',
					// 	icon: 'el-icon-eleg-icon_datareport_alt el-icon--left',
					// 	name: '在线时长对比',
					// 	action: 'goDetail'
					// }
				],
				category: "MultimediaIT",
				MonthOrDay: 'month',
				selectedDate: new Date(),
				Year: "",
				Month: "",
				Day: "",
				Order: 2
			}
		},
		props: {
			templateObj: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		methods: {
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			exportExcel(row) {
				HttpServer.httpGet2.call(this,
					`/Api/Statistics/ConsumptionExport?&Category=${this.category}
						&Begin=${this.startTime}&End=${this.endTime}&Year=${this.Year}
						&Month=${this.Month}&Day=${this.Day}&Index=${this.currentPage}
						&PageSize=${this.pageSize}&Order=${this.Order}`,
					response => {}, response => {
						GloabFun.downLoadFile('用电量统计表','xlsx', response.data)
					})
			},
			changeCategory() {
				this.initMonth(this.selectedDate);
				this.getDatas();
			},
			initDate() {
				let formateDate = this.selectedDate.format("yyyy-MM-dd");
				let array = formateDate.split('-')
				this.Year = array[0];
				this.Month = array[1];
				this.Day = array[2];
				this.getDatas();
			},
			initMonth() {
				let formateDate = this.selectedDate.format("yyyy-MM-dd");
				let array = formateDate.split('-')
				this.Year = array[0];
				this.Month = array[1];
				this.Day = null;
				this.getDatas();
			},
			executeAction(action) {
				if (action) {
					this[action]();
				}
			},
			//保留小数点后两位
			toDecimal(array) {
				for (var i = 0; i < array.length; i++) {
					var f = parseFloat(array[i].consumption);
					if (isNaN(f)) {
						return;
					}
					f = Math.round(array[i].consumption * 100) / 100;
					array[i].consumption = f;
				}
				return array;
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getDatas();
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.getDatas();
			},
			changeStartTime(val) {
				this.startTime = val + ' 00:00:00';
				this.getDatas();
			},
			changeEndTime(val) {
				this.endTime = val + ' 23:59:59';
				this.getDatas();
			},
			showDetail(row) {
				if (this.category === 'MultimediaIT') {
					row.startTime = this.startTime;
					row.endTime = this.endTime;
					this.$emit('changeView', 'Detail', row);
				} else if (this.category === 'EBox') {
					row.MonthOrDay = this.MonthOrDay;
					row.selectedDate = this.selectedDate;
					this.$emit('changeView', 'EBoxDetail', row);
				}
			},
			reloadDatas() {
				HttpServer.httpPost.call(this, '/Api/Statistics/GetConsumption', {
					begin: this.startTime,
					end: this.endTime,
					index: this.currentPage,
					pagesize: this.pageSize,
					UserId: parseInt(GloabFun.getKeyId())
				}, function(response) {}, function(response) {
					if (response.data.code === 0) {
						this.tableData = this.toDecimal(response.data.info);
						this.totalSize = response.data.total;
						this.$notify({
							title: '成功',
							message: this.$t('message.refreshSuccess'),
							type: 'success',
							duration: 2500
						});
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				})
			},
			getDatas() {
				HttpServer.httpPost.call(this, '/Api/Statistics/GetConsumption', {
					begin: this.startTime,
					end: this.endTime,
					index: this.currentPage,
					pagesize: this.pageSize,
					UserId: parseInt(GloabFun.getKeyId()),
					category: this.category,
					year: this.Year,
					month: this.Month,
					day: this.Day,
					order: this.Order
				}, function(response) {}, function(response) {
					// console.log(response)
					if (response.data.code === 0) {
						this.tableData = this.toDecimal(response.data.info);
						this.totalSize = response.data.total;
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				})
			}
		},
		computed: {},
		created() {
			this.getDatas();
		}
	}
</script>
<style scoped lang="less">
	.name {
		color: #20a0ff;
	}
	.el-date-editor.el-input {
		width: 130px;
	}
	.edit-mission {
		padding-top: 50px;
		.el-dialog__header {
			background-color: #000;
		}
		.el-dialog__body {
			position: relative;
		}
		.clearfloat {
			height: 100px;
			max-height: 150px;
		}
	}
</style>